{% extends 'base.html' %}
{% block css %}
     <style>
        .account {
            width: 400px;
            margin: 0 ;
        }

        h1 {
            text-align: center;
        }

        .error-msg {
            color: red;
            position: absolute;
            font-size: 13px;
        }

    </style>
{% endblock %}
{% block bar %}
    <div class="col-md-9" style="justify-content: flex-end;">
            <h1 class="page-header">图书管理页面</h1>
        <div class="panel panel-primary">
                <!-- Default panel contents -->
        <div class="panel-heading">添加图书<i class="fa fa-thumb-tack pull-right"></i></div>
            <div  class="panel-body">
                 <!-
            </div>
      </div>
{% endblock %}
{% block main %}
    <form action="" method="post" id="regForm" class="account">
    {% csrf_token %}
        {% for field in form %}
          {% if field.name != 'id' %}
             <div class="form-group">
                 <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                  {{ field }}
                 <span class="error-msg"></span>
             </div>
          {% endif %}
      {% endfor %}
{#    <p>#}
{#        图书名称 <input type="text" name="name" >#}
{#         <span class="error-msg"></span>#}
{#    </p>#}
{#    <p>#}
{#        价格 <input type="text" name="price">#}
{#         <span class="error-msg"></span>#}
{#    </p>#}
{#    <p>#}
{#        库存 <input type="text" name="inventory">#}
{#         <span class="error-msg"></span>#}
{#    </p>#}
{#    <p>#}
{#        卖出数 <input type="text" name="sale_num">#}
{##}
{#    </p>#}
{#      <span class="error-msg"></span>#}
    <p>
        出版社
        <select multiple name="publisher_id" id="">
            {% for publisher_obj in publisher_obj_list %}
                <option value="{{ publisher_obj.id }}">{{ publisher_obj.name }}</option>
            {% endfor %}
        </select>
    </p>
    <span class="error-msg"></span>
    <p>
        <button type="button" class="btn"  id="btnSubmit">提交</button>
    </p>
    </form>
{% endblock %}
{% block js %}
    <script>
     $(function () {
            bindClickSubmit();
        })
    function bindClickSubmit() {
            $("#btnSubmit").click(function () {
                $('.error-msg').empty();
                $.ajax({
                    url: '{% url 'app01:add_book' %}',
                    type: 'POST',
                    data: $('#regForm').serialize(),
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.status) {
                            // 跳转到登录页面
                            console.log(res.data)
                            location.href = res.data
                        } else {
                            // 错误 显示对应的错误信息
                            back=res.error
                            $.each(back, function (key, value) {
                                console.log(key,value)
                                $('#id_' + key).next().text(value[0])
                            });
                        }
                    }
                });
            });
        }
    </script>
{% endblock %}